﻿@model PagedList.IPagedList<WineStore.Models.Product>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/HomeLayout.cshtml";
}
<!--Sử dụng cho autocomplete-->
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    #myDivTwitter
    {
        height: 240px;
        width: 260px;
        background-color: White;
        margin-left: -454px;
        position: absolute;
        margin-top: -1000px;
        z-index: 200;
        border: 2px solid DodgerBlue;
        border-bottom-right-radius: 10px; /*Góc dưới phải */
        border-top-right-radius: 10px; /*Góc trên phải*/
    }
    #myImgTwitter
    {
        margin-top: 70px;
        margin-left: 263px;
        position: absolute;
        border-bottom-right-radius: 10px; /*Góc dưới phải */
        border-top-right-radius: 10px; /*Góc trên phải*/
    }
    #myDivFacebook
    {
        height: 240px;
        width: 260px;
        background-color: White;
        margin-left: -454px;
        position: absolute;
        margin-top: -1105px;
        z-index: 200;
        border: 2px solid DodgerBlue;
        border-bottom-right-radius: 10px; /*Góc dưới phải */
        border-top-right-radius: 10px; /*Góc trên phải*/
    }
    #myImgFacebook
    {
        margin-top: 70px;
        margin-left: 263px;
        position: absolute;
        border-bottom-right-radius: 10px; /*Góc dưới phải */
        border-top-right-radius: 10px; /*Góc trên phải*/
    }
    #myDivYouTube
    {
        height: 240px;
        width: 260px;
        background-color: White;
        margin-left: -454px;
        position: absolute;
        margin-top: -895px;
        z-index: 200;
        border: 2px solid red;
        border-bottom-right-radius: 10px; /*Góc dưới phải */
        border-top-right-radius: 10px; /*Góc trên phải*/
    }
    #myImgYouTube
    {
        margin-top: 70px;
        margin-left: 263px;
        position: absolute;
        border-bottom-right-radius: 10px; /*Góc dưới phải */
        border-top-right-radius: 10px; /*Góc trên phải*/
    }
</style>

<script src="../../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<!--Sử dụng cho autocomplete-->
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../Scripts/HomeScripts/nivo.slider.js"></script>
<div id="tmnivoslider">
    <div id="slider">
        <a href="">
            <img src="../../Content/HomeImages/slide_00.jpg" alt="" /></a> <a href="">
                <img src="../../Content/HomeImages/slide_01.jpg" alt="" /></a> <a href="">
                    <img src="../../Content/HomeImages/slide_02.jpg" alt="" /></a>
    </div>
</div>
<script type="text/javascript">
    jQuery(window).load(function () {
        jQuery('#slider').nivoSlider({
            effect: 'fade', //Specify sets like: 'fold,fade,sliceDown'
            slices: 10,
            animSpeed: 500, //Slide transition speed
            pauseTime: 5000,
            startSlide: 0, //Set starting Slide (0 index)
            directionNav: true, //Next & Prev
            directionNavHide: false, //Only show on hover
            controlNav: false, //1,2,3...
            controlNavThumbs: false, //Use thumbnails for Control Nav
            controlNavThumbsFromRel: false, //Use image rel for thumbs
            controlNavThumbsSearch: '.jpg', //Replace this with...
            controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
            keyboardNav: true, //Use left & right arrows
            pauseOnHover: true, //Stop animation while hovering
            manualAdvance: false, //Force manual transitions
            captionOpacity: 1.0, //Universal caption opacity
            beforeChange: function () { },
            afterChange: function () { },
            slideshowEnd: function () { } //Triggers after all slides have been shown
        });
    });

    $(document).ready(function () {
        $("#myDivTwitter").hover(function () {
            $(this).stop().animate({ marginLeft: "-189px" }, 700);
            $("#myDivFacebook").hide();
            $("#myDivYouTube").hide();
        }, function () {
            $(this).stop().animate({ marginLeft: "-454px" }, "fast");
            $("#myDivFacebook").show();
            $("#myDivYouTube").show();
        });
        $("#myDivFacebook").hover(function () {
            $(this).stop().animate({ marginLeft: "-189px" }, 700);
            $("#myDivTwitter").hide();
            $("#myDivYouTube").hide();
        }, function () {
            $(this).stop().animate({ marginLeft: "-454px" }, "fast");
            $("#myDivTwitter").show();
            $("#myDivYouTube").show();
        });
        $("#myDivYouTube").hover(function () {
            $(this).stop().animate({ marginLeft: "-189px" }, 700);
            $("#myDivTwitter").hide();
            $("#myDivFacebook").hide();
        }, function () {
            $(this).stop().animate({ marginLeft: "-454px" }, "fast");
            $("#myDivTwitter").show();
            $("#myDivFacebook").show();
        });
    });

</script>

<!--Sử dụng cho autocomplete-->
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('*[data-autocomplete-url]')
        .each(function () {
            $(this).autocomplete({
                source: $(this).data("autocomplete-url")
            });
        });
    });
</script>
<div id="indexpartial">
    @Html.Partial("IndexPartial")
</div>
<!-- MODULE Home Featured Products -->
<div id="featured_products">
    <h4>
        Featured products</h4>
    <div class="block_content">
        <ul>
            <li class=""><a class="product_image" href="" title="2004 Killibinbin Cabernet Sauvignon">
                <img src="../../Content/Images/1-home_btt.jpg" alt="2004 Killibinbin Cabernet Sauvignon" /></a>
                <div>
                    <h5>
                        <a class="product_link" href="" title="2004 Killibinbin Cabernet...">2004 Killibinbin
                            Cabernet...</a></h5>
                    <p>
                        <a class="product_descr" href="" title="More">Well, it seems that those people who have
                            invented...</a></p>
                    <span class="price">$549.00</span> <a class="feat_view" href="" title="View">View</a>
                </div>
            </li>
            <li class=""><a class="product_image" href="" title="2008 HALL Napa River Ranch Rose">
                <img src="../../Content/Images/5-home_btt.jpg" alt="2008 HALL Napa River Ranch Rose" /></a>
                <div>
                    <h5>
                        <a class="product_link" href="" title="2008 HALL Napa River Ranch Rose">2008 HALL Napa
                            River Ranch...</a></h5>
                    <p>
                        <a class="product_descr" href="" title="More">Just remember how many different works
                            of art were...</a></p>
                    <span class="price">$215.00</span> <a class="feat_view" href="" title="View">View</a>
                </div>
            </li>
            <li class=""><a class="product_image" href="" title="2009 HALL Napa Valley Sauvignon Blanc">
                <img src="../../Content/Images/8-home_btt.jpg" alt="2009 HALL Napa Valley Sauvignon Blanc" /></a>
                <div>
                    <h5>
                        <a class="product_link" href="" title="2009 HALL Napa Valley...">2009 HALL Napa Valley...</a></h5>
                    <p>
                        <a class="product_descr" href="" title="More">It seems that every artist of all times
                            was admiring...</a></p>
                    <span class="price">$39.20</span> <a class="feat_view" href="" title="View">View</a>
                </div>
            </li>
            <li class="feat-4"><a class="product_image" href="" title="GR NV Sauvignon Blanc">
                <img src="../../Content/Images/11-home_btt.jpg" alt="GR NV Sauvignon Blanc" /></a>
                <div>
                    <h5>
                        <a class="product_link" href="" title="GR NV Sauvignon Blanc">GR NV Sauvignon Blanc</a></h5>
                    <p>
                        <a class="product_descr" href="" title="More">It gives inspiration and health, it has
                            unique,...</a></p>
                    <span class="price">$220.50</span> <a class="feat_view" href="" title="View">View</a>
                </div>
            </li>
        </ul>
        <div class="clearblock">
        </div>
    </div>
</div>
<!-- /MODULE Home Featured Products -->
<!--Sliding Fanpage-->
<div id="myDivTwitter">
    <img id="myImgTwitter" src="../../Content/Images/Twitter.png" alt="Gmail" />
        @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    { 
        <p style="color: Red;">
            Name:@Html.TextBox("SearchString", ViewBag.CurrentFilter as string, new { data_autocomplete_url = Url.Action("Autocomplete") })<br/>
            Min Price:@Html.TextBox("SearchString2", ViewBag.CurrentFilter2 as string, null)<br/>
            Max Price:@Html.TextBox("SearchString3", ViewBag.CurrentFilter3 as string, null)<br/>
            <input type="submit" value="Search" />
        </p>
    }
</div>
<div id="myDivFacebook">
    <img id="myImgFacebook" src="../../Content/Images/Facebook.png" alt="Facebook" />
    <img id="2" src="../../Content/Images/1362481890-bikini2.jpg" width="140px" height="240px"
        alt="Gmail" />
</div>
<div id="myDivYouTube">
    <img id="myImgYouTube" src="../../Content/Images/YouTube.png" alt="Facebook" />
    <img id="3" src="../../Content/Images/1362481890-bikini2.jpg" width="140px" height="240px"
        alt="Gmail" />
</div>
<!--End Sliding Fanpage-->
